@import "./styles";

$minHeight: 730px;

.exper {
  position: relative;
  height: 100%;
  background: {
    image: linear-gradient(to bottom, #010731 8%, #0098C5 33%, #040224 41%);
  }
  &-title {
    position: absolute;
    left: 0;
    right: 0;
    top: rem(80);
    display: block;
    width: rem(228);
    margin: auto;
  }

  &-floor {
    position: absolute;
    top: rem(145);
    width: 100%;
    height: rem(380);
    transition: all 1s;
    @media screen and (max-width: 375px) and(min-height: 660px) {
      top: rem(180);
    }
    @media screen and (max-width: 375px) and(min-height: 700px) {
      top: rem(220);
    }
    @media screen and (max-width: 375px) and(min-height: 750px) {
      top: rem(260);
    }
    @include min-screen-height(760px) {
      top: rem(260);
    }

    .ewfloor {
      position: absolute;
      bottom: 0;
      display: inline-block;
      height: rem(343);
    }
    &-one {
      left: rem(280);
    }
    &-two {
      right: rem(250);
    }
  }

  &-warp {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 100%;
    @include bg-image('../images/experience/experience_bg', 'png');
    background: {
      size: cover;
      position: center bottom;
      repeat: no-repeat;
    }
    z-index: 2;
  }

  .exper-warp-content {

    position: relative;
    width: 100%;
    height: 100%;

    .exper-warp-move {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      transform: translateY(100%);
      z-index: 2;

      pointer-events: none;
      .exper-warp-box {
        width: 100%;
        height: rem(75+84+352);

        .exper-move {
          position: absolute;
          left: 0;
          right: 0;
          margin: auto;

        }
        .exper-warp-box-lamp {
          top: 0;
          width: rem(72);
          z-index: 1;

          @include animation(carLamp 1.5s infinite);
        }
        .exper-warp-box-car {
          top: rem(75);
          width: rem(95);
          z-index: 2;
        }
        .exper-warp-box-title {
          top: rem(75+84+30);
          width: rem(114);
          z-index: 1;
          transform: scale(5) rotateX(180deg);
          opacity: 0;
        }

      }
    }
    .exper-warp-line {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: rem(41);
      height: rem(804);
      transform: translateY(100%);
      @include bg-image('../images/experience/experience_line', 'png');
      background: {
        position: center;
        size: cover;
        repeat: no-repeat;
      }
    }
    &_btn {
      display: block;
      position: absolute;
      left: 0;
      right: 0;
      bottom: rem(60);
      width: rem(261);
      height: rem(101);
      margin: auto;
      @include bg-image('../images/experience/experience_btn', 'png');
      background: {
        position: center;
        size: cover;
        repeat: no-repeat;
      }

      &:active {
        @include bg-image('../images/experience/experience_btn_sel', 'png');
      }
    }
  }

  &-ui {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    padding: rem(20);
    box-sizing: border-box;
    pointer-events: none;
    .exper-ui-warp {
      position: relative;
      width: 100%;
      height: 100%;
      border: solid 1px color('exprience', 'border');
      .exper-pointer {

        position: absolute;
        right: rem(60);
        bottom: rem(120);
        width: rem(110);
        height: rem(110);

        .cls-1, .cls-2, .cls-3, .cls-4 {
          fill: #005a73;
        }
        .cls-1, .cls-2 {
          fill-rule: evenodd;
        }
        .cls-2, .cls-4 {
          opacity: 0.2;
        }
        .cls-5 {
          fill: none;
        }
        #pointer {
          transform-origin: center;
        }
      }
      .exper-lattice {
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        width: rem(750-40);
        height: rem(20);
        background: transparent;
        transform-origin: 50% 50%;
        .line {
          fill: transparent;
          stroke: #005a73;
          stroke-miterlimit: 10;
          stroke-width: 0.34px;
          opacity: .3;
        }
      }
      .lattice-top {
        top: 0;
      }
      .lattice-foot {
        bottom: 0;
        @include transform(rotateY(180deg));
      }
      .exper-box {
        position: absolute;
        left: rem(60);
        bottom: rem(120);
        width: rem(110);
        height: rem(110);
        line-height: rem(110);
        text-align: center;
        font-size: 18px;
        color: color('exprience', 'base');
        .exper-oil {
          position: absolute;
          left: 0;
          top: 0;
          width: rem(110);
          height: rem(110);

          #oil {
            stroke-dasharray: 340;
            stroke-dashoffset: 0; // 0~-180
            transform: rotate(180deg);
            transform-origin: 50% 50%;
          }
        }
      }

      //  线形动画
      .exper-lin {
        position: absolute;
        width: rem(186);
        height: rem(20);
        .line {
          fill: transparent;
          stroke: #005a73;
          stroke-width: 5px;
          stroke-dasharray: 20;
          stroke-dashoffset: 0; // 0~-180
          opacity: .3;
        }
      }
      .warp-top {
        top: rem(20);
        left: rem(0);
      }
      .warp-foot {
        bottom: rem(20);
        right: 0;
        @include transform(rotateX(180deg));
      }
      .warp-left {
        top: rem(75*1);
        left: 0;
        @include transform(rotateZ(90deg) rotateX(180deg));
        transform-origin: top left;
      }
      .warp-right {
        bottom: rem(75*1);
        right: rem(0.3*75);
        @include transform(rotateZ(90deg));
        transform-origin: bottom right;
      }
      //  线形动画

    }
  }
}

@include keyframes(carLamp) {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}